<script setup>
  import { onBeforeRouteLeave, useRoute } from 'vue-router';
  import { watch, reactive } from 'vue';
  import { GetClosePositionOverView } from '@/api/exdoctor/exclose'
  const appRoute = useRoute()

  const pageData = reactive({
    overview: {},
    dataLoading: false,
  })

  const getOverview = () => {
    const params = {
      fn: appRoute.query.fn,
      start: appRoute.query.start,
      end: appRoute.query.end
    }
    pageData.dataLoading = true
    GetClosePositionOverView(params.fn, params.start, params.end).then((res) => {
      const overview = res.data.overview
      let localData = {}
      for (let i=0; i < overview.length; i++) {
        const obj = overview[i]
        localData[obj.key] = obj.value
      }
      pageData.overview = localData
      pageData.dataLoading = false
    }).catch(() => {
      pageData.dataLoading = false
    })
  }

  const watchRouteTs = watch(() => appRoute.query._ts, () => {
    getOverview()
  }, { immediate: true})

  onBeforeRouteLeave(() => {
    watchRouteTs()
  })
</script>
<template>
  <div class="view-container">
    <div class="title-box">
      <div class="title">交易统计分析</div>
      <div class="sub-title">- 平仓盈利与亏损 -</div>
    </div>
    <div class="table-box" v-loading="pageData.dataLoading">
      <el-row class="row">
        <el-col class="header col" :span="6"></el-col>
        <el-col class="header col" :span="6">盈利</el-col>
        <el-col class="header col" :span="6">亏损</el-col>
        <el-col class="header col" :span="6">持平</el-col>
      </el-row>
      <el-row class="row">
        <el-col class="header col" :span="6">交易次数</el-col>
        <el-col class="col" :span="6">{{ pageData.overview.gain_count }}</el-col>
        <el-col class="col" :span="6">{{ pageData.overview.loss_count }}</el-col>
        <el-col class="col" :span="6">{{ pageData.overview.level_count }}</el-col>
      </el-row>
      <el-row class="row">
        <el-col class="header col" :span="6">合计盈亏</el-col>
        <el-col class="col" :span="6">{{ pageData.overview.gain_amount }}</el-col>
        <el-col class="col" :span="6">{{ pageData.overview.loss_amount }}</el-col>
        <el-col class="col" :span="6">{{ pageData.overview.level_amount }}</el-col>
      </el-row>
      <el-row class="row">
        <el-col class="header col" :span="6">每笔平均盈亏</el-col>
        <el-col class="col" :span="6">{{ pageData.overview.average_gain_amount }}</el-col>
        <el-col class="col" :span="6">{{ pageData.overview.average_loss_amount }}</el-col>
        <el-col class="col" :span="6">{{ pageData.overview.average_level_amount }}</el-col>
      </el-row>
      <el-row class="row">
        <el-col class="header col" :span="6">总盈利</el-col>
        <el-col class="col" :span="18">{{ pageData.overview.total_profit }}</el-col>
      </el-row>
      <el-row class="row">
        <el-col class="header col" :span="6">总次数</el-col>
        <el-col class="col" :span="18">{{ pageData.overview.total_count }}</el-col>
      </el-row>
      <el-row class="row">
        <el-col class="header col" :span="6">胜率</el-col>
        <el-col class="col" :span="18">{{ (pageData.overview.success_ratio * 100).toFixed(2) }}%</el-col>
      </el-row>
      <el-row class="row">
        <el-col class="header col" :span="6">盈亏比</el-col>
        <el-col class="col" :span="18">{{ pageData.overview.gain_divisor_loss }}</el-col>
      </el-row>
    </div>
    <div class="tip-box">
      <div>提示说明：</div>
      <div>
        1. 表中总盈利统计平仓记录的情况，不包括期间浮动收益。
      </div>
      <div>
        2. 盈亏比为1时，则表示没有亏损的平仓记录。
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
  .view-container {
    padding: 0 20px 10px 20px;
    .title-box {
      // text-align: left;
      margin: 10px 0;
      line-height: 30px;
      .title {
        font-size: 22px;
        font-weight: 600;
      }
      .sub-title {
        color: #444;
        font-size: 15px;
        
      }
    }
    .tip-box {
      margin-top: 10px;
      line-height: 25px;
      font-size: 13px;
      color: #444;

    }
    .table-box {
      .row {
        text-align: center;
        line-height: 30px;
        border-bottom: 1px solid #ebeef5;
        &:first-child {
          border-top: 1px solid #ebeef5;
        }
        .header {
          background-color: #f5f7fa;
          font-weight: 600;
          color: #606266;
          font-size: 15px;
        }
        .col {
          border-left: 1px solid #ebeef5;
          &:last-child {
            border-right: 1px solid #ebeef5;
          }
        }
      }
    }
  }
</style>